<template>
	<div>	
		<div class="row" v-show="!end">
			<alert v-show="problems.length === 0" color="info" value="Empty!"></alert>
			<div class="col-xs-offset-1 col-xs-10">
				<panel v-for="(problem, index) in problems"
						:title="index + 1 + '.  ' + problem.question"
						color="info"
						:has-footer="problem.choice !== problem.answer && problem.choice !== ''">
					<radio v-show="problem.sa !== ''" choice="A" v-model="problem.choice">{{ problem.sa }}</radio>
					<radio v-show="problem.sb !== ''" choice="B" v-model="problem.choice">{{ problem.sb }}</radio>
					<radio v-show="problem.sc !== ''" choice="C" v-model="problem.choice">{{ problem.sc }}</radio>
					<radio v-show="problem.sd !== ''" choice="D" v-model="problem.choice">{{ problem.sd }}</radio>
					<radio v-show="problem.se !== ''" choice="E" v-model="problem.choice">{{ problem.se }}</radio>
					<radio v-show="problem.sf !== ''" choice="F" v-model="problem.choice">{{ problem.sf }}</radio>

					<strong slot="footer" class="text-danger">
						The answer is: {{ problem.answer }}
					</strong>
				</panel>

				<button v-show="!isEmpty" @click="submit"
					class="btn btn-primary btn-lg btn-block">Submit</button>

			</div>
		</div>
		<panel v-show="end" title="Result" 
			:has-body="false"
			color="primary">		
			<table-boot slot="other">
				<tr slot="head"><th>Course</th><th>Exam type</th></tr>
				<tr><td>{{ courseName }}</td><td>{{ ExamTypeName }}</td></tr>
			</table-boot>
			<table-boot slot="other">
				<tr slot="head"><th>Correct</th><th>Wrong</th><th>Done</th></tr>
				<tr><td>{{ corrects.length }}</td><td>{{ wrongs.length }}</td><td>{{ dones.length }}</td></tr>
			</table-boot>
		</panel>
	</div>
</template>

<script>
	import Panel from 'components/Panel.vue' 
	import Radio from 'components/Radio.vue'
	import Alert from 'components/Alert.vue'
	import TableBoot from 'components/Table.vue'
	import { mapState, mapActions, mapGetters } from 'vuex'

	export default {
		data(){
			return {
				corrects: [],
				dones: [],
				wrongs: [],
			}
		},
		computed: {
			...mapState('pages/exam/running', [
	  			'problems',
				'end',
	  		]),
	  		...mapGetters('pages/exam/running', [
	  			'courseName',
				'ExamTypeName',
	  		]),
	  		isEmpty() {
	  			return this.problems.length === 0;
	  		},
		},
	    components: {
	    	Panel, Radio, Alert, TableBoot
	    },
	    methods: {
	    	submit() {
	    		var _this = this;
	    		calculate(
					this.dones,
	    			this.corrects,
					this.wrongs,
					this.problems
				)
	    		this.$store.dispatch('pages/exam/running/submit',
	    			_this.dones.length,
	    			_this.dones,
	    			_this.corrects,
	    			_this.wrongs,
	    		);
	    	},
	    },
  	}

  	function calculate(dones = [], corrects = [], wrongs = [], problems = []){
		
		problems.forEach(ele => {
			var id =  '' + ele.id,
				answer = '' + ele.answer,
				choice = '' + ele.choice;

			if (choice !== ''){
				dones.push(id);
				if (choice === answer){
					corrects.push(id);
				}
				else 
					wrongs.push(id);
			}
		});

  	}

</script>

<style scoped>
</style>
